<template>
  <view class="search-bar">
    <view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="search-bar-box">
      <input :focus="showSync" :disabled="inputDisabled" :placeholder="placeholder" :maxlength="maxlength" @confirm="confirm" @input="onKeyInput" class="search-bar-box-search-input" confirm-type="search" type="text" v-model="searchVal" />
      <view class="offside-box">
        <uni-icons v-if="clearButton==='always'||clearButton==='auto' && searchVal!==''" color="#999999" class="icon-clear" @click="clear" size="24" type="clear" />
        <uni-icons color="#999999" class="icon-search" @click="cancel" size="24" type="search" />
      </view>
    </view>
  </view>
</template>

<script>
/**
 * SearchBar 搜索栏
 * @property {Number} radius 搜索栏圆角
 * @property {Number} maxlength 输入最大长度
 * @property {String} placeholder 搜索栏Placeholder
 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
   * @value always 一直显示
   * @value auto 输入框不为空时显示
   * @value none 一直不显示
 * @property {String} bgColor 输入框背景颜色
 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 */

export default {
  name: 'SearchBar',
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    radius: {
      type: [Number, String],
      default: 13
    },
    clearButton: {
      type: String,
      default: 'auto'
    },
    bgColor: {
      type: String,
      default: '#F8F8F8'
    },
    maxlength: {
      type: [Number, String],
      default: 100
    },
    inputDisabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showSync: false,
      searchVal: ''
    }
  },
  methods: {
    onKeyInput: function (event) {
      this.searchVal = event.target.value
    },
    clear () {
      this.searchVal = ''
    },
    cancel () {
      this.$emit('cancel', {
        value: this.searchVal
      })
      this.searchVal = ''
      this.showSync = false
      // #ifndef APP-PLUS
      uni.hideKeyboard()
      // #endif
    },
    confirm () {
      // #ifndef APP-PLUS
      uni.hideKeyboard()
      // #endif
      this.$emit('confirm', {
        value: this.searchVal
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$uni-searchbar-height: 36px;

.search-bar {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 0 40rpx;
  background: #fefefe;
}

.search-bar-box {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 17px;
  border: 1px solid #e7e7e7;
  border-radius: 26rpx;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.06);
}

.search-bar-box-search-input {
  flex: 1;
  color: $uni-text-color;
}

.offside-box {
  .icon-clear {
    align-items: center;
    padding-left: 5px;
    margin-right: 5px;
  }
  .icon-search {
    color: $uni-text-color-placeholder;
  }
}
</style>
